<template>
  <div class="home">
      <Header/>
      <Sider @siderHandle="siderHandle" ref="siderRef"/>
      <div class="main">
        <component :is="flowLake" @closeLeft="closeLeft" :ref="flowLake" />
      </div>
      <Modal
        v-model="modalShow"
        title="Version"
        footer-hide
        >
        <p style="height: 50px;line-height: 50px;text-align: center;font-size: 18px;font-weight: bold;">上海天正智能数据有限公司v1.0</p>
    </Modal>
    <Modal
        v-model="exportShow"
        title="Export"
        footer-hide
        >
        <svg viewBox="0 0 1024 1024" >

        </svg>
    </Modal>
  </div>
</template>

<script>
import Header from '../components/header'
import Sider  from '../components/sider.vue'
import sql from '../views/sql.vue'
export default {
  name: 'Home',
  components:{Header,Sider,sql},
  data(){
    return{
      modalShow:false,
      exportShow:false,
      flowLake:'sql',
    }
  },
  methods:{
    closeLeft(){
      this.$refs.siderRef.current = -1
    },
    siderHandle(item){
      switch(item.code){
        case 'sql':
          this.flowLake = item.code
          this.$refs.sql.split1 = 0.45
          this.$refs.sql.minSplit = '620'
          this.$nextTick(()=>{
            this.$refs.sql.key++
          })
          this.$refs.sql.graphChange()
          document.querySelector('.ivu-split-trigger').style.display = 'block'
          break;
        case 'job':
          break;
        case 'schema':
          break;
        case 'latestJob':
          break;
        case 'export':
          console.log(this.$refs.sql.$refs.antvG6.graph,this.$refs.sql.$refs.erGraph.graph)
          if(this.$refs.sql.$refs.antvG6.graph||this.$refs.sql.$refs.erGraph.graph){
            if(this.$refs.sql.tabsVal=='antVG6'){
              if(this.$refs.sql.$refs.antvG6.graph){
                this.$refs.sql.$refs.antvG6.downloadFullImage('血缘关系')
              }else{
                this.$Message.info('当前没有血缘关系')
              }
            }else{
              if(this.$refs.sql.$refs.erGraph.graph){
                this.$refs.sql.$refs.erGraph.downloadFullImage('er图')
              }else{
                this.$Message.info('当前没有er图')
              }
            }
          }else{
            this.$Message.info('请先解析出图形')
          }
          
          break;
        case 'version':
          this.modalShow = true
          break;
      }
    }
  }
}
</script>
<style scoped lang="less">
  .home{
    width: 100%;
    height: 100%;
    .main{
      width: calc(100% - 40px);
      height: calc(100% - 50px);
      // float: left;
      margin-left: 40px;
    }
  }
</style>
